<%@ page language="java" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="zh-CN">
<head>
<%@include file="/WEB-INF/views/commons/common.jsp"%>
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap-dialog3/css/bootstrap-dialog.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/validation-engine/validationEngine.jquery.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/jquery-easyui/1.4.3/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/font-awesome/4.3.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/webuploader/0.1.5/webuploader.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/viewer/viewer.css">
<link rel="stylesheet" type="text/css" href="${base_href}//static/ui-frame/ztree-v3/css/zTreeStyle/zTreeStyle.css">

<link rel="stylesheet" type="text/css" href="${base_href}/static/css/search-theme.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/css/form-theme.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/layui-v2.3.0/layui/css/layui.css">

<title>订单详细信息</title>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="350">


	<div class="main-wrap">

		<!-- 工具条 start-->
		<div class="container-fluid form-body-header">
			<div class="container">
				<div class="row tool-bar">
					<div class="col-xs-12">
						<button type="button" class="btn btn-sm tool-btn" id="closeBtn">关闭</button>
						<button type="button" class="btn btn-sm tool-btn" id="addLogBtn">添加操作日志</button>
						<button type="button" class="btn btn-sm tool-btn" id="completeBtn">完成订单</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 工具条 end-->

		<!-- 表单 start-->
		<div class="container-fluid">
			<form id="form">
				<input type="hidden" name="order.orderId" value="${form.order.orderId }" />
				<div class="container form-body-div">
					<div class="row text-center title-body" id="baseinfo">
						订单详细信息<br />
					</div>

					<div class="row pannel-title">
						<span>基本信息</span> <a href="javascript:void(0);" class="hide-next-btn">收起</a>
					</div>
					<div class="row pannel-body">
						<table class="form-table">
							<tr>
								<th class="col-xs-2">订单编号</th>
								<td class="col-xs-4">
									${form.order.orderNo}
								</td>
								<th class="col-xs-2">订单来源</th>
								<td class="col-xs-4">
									${form.order.orderSource}
								</td>
							</tr>
							<tr>
								<th class="col-xs-2">订单创建时间</th>
								<td class="col-xs-4">
									<fmt:formatDate value="${form.order.orderCreateTime}" type="both" pattern="yyyy-MM-dd HH:mm:ss" />
								</td>
								<th class="col-xs-2">付款时间</th>
								<td class="col-xs-4">
									<fmt:formatDate value="${form.order.orderPayTime}" type="both" pattern="yyyy-MM-dd HH:mm:ss" />
								</td>
							</tr>
							<tr>
								<th class="col-xs-2">购买人姓名</th>
								<td class="col-xs-4">
									<div class="pre-div">${form.order.customerName}</div>
								</td>
								<th class="col-xs-2">购买人手机号</th>
								<td class="col-xs-4">
									${form.order.customerPhone}
								</td>
							</tr>
							<tr>
								<th class="col-xs-2">收件人姓名</th>
								<td class="col-xs-4">
									<div class="pre-div">${form.order.receiverName}</div>
								</td>
								<th class="col-xs-2">收件人手机号</th>
								<td class="col-xs-4">
									${form.order.receiverPhone}
								</td>
							</tr>
							<tr>
								<th class="col-xs-2">收件人地址</th>
								<td class="col-xs-4" colspan="3">
									${form.order.receiverAddress}
								</td>
							</tr>
						</table>
					</div>
					
					<div class="row pannel-title">
						<span>客服操作日志</span> <a href="javascript:void(0);" class="hide-next-btn">收起</a>
						
					</div>
					<div class="row pannel-body">
						<table class="form-table">
							<c:forEach items="${form.orderLogs}" var="state">
								<tr>
									<td class="col-xs-2" colspan="4">
										<div class="pre-div">${state.logMessage}</div>
									</td>
								</tr>
								<tr>
									<th class="col-xs-2">操作人姓名</th>
									<td class="col-xs-4">
										<div class="pre-div">${state.operaterName}</div>
									</td>
									<th class="col-xs-2">操作时间</th>
									<td class="col-xs-4">
										<fmt:formatDate value="${state.createTime}" type="both" pattern="yyyy-MM-dd HH:mm:ss" />
									</td>
								</tr>
							</c:forEach>
							
						</table>
					</div>

				</div>
			</form>
		</div>
		<!-- 表单 end-->
		
	</div>
	<script type="text/javascript" src="${base_href}/static/ui-frame/jquery/1.11.3/jquery.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap/3.3.5/js/bootstrap.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap-dialog3/js/bootstrap-dialog.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine-zh_CN.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/My97DatePicker/WdatePicker.js"></script>
	
	
	<script type="text/javascript" src="${base_href}/static/ui-frame/layer/layer.js"></script>
	<script type="text/javascript">
	$(function() {
		$("#closeBtn").click(function(){
			window.close();
		});
		$("#addLogBtn").click(function(){
			addLog();
		});
		$("#completeBtn").click(function(){
			completeOrder();
		});
		
		function completeOrder(){
			var url = basePath+ "/order/addOrderLog";
			var logMessage = "完成订单"
			$.ajax({
				url: url,
				type: "post",
				data: {"logMessage":logMessage
					, "orderId":$("input[name='order.orderId']").val()
					, "orderLogStatus":"3"},
				dataType:"json",
				success: function(r){
					layer.confirm(r.message,{
						btn:['确定']
					},function(){
						location.reload();
					})
				},
				error:function(a){
					console.log(a);
					layer.msg("保存失败，请联系管理员")
				}
			});
		}
		
		function addLog(){
			var url = basePath+ "/order/addOrderLog";
			var html = '<textarea class="form-control validate[maxSize[5]]"'+
				'data-errormessage-range-overflow="操作日志长度不能超过1000个字" rows="5" id="logMessage"'+
				'placeholder="请填写操作日志"></textarea>';
			layer.open({
				btn: ['确定', '取消'],
				type: 1,
				title: '添加操作日志',
				shadeClose: true,
				shade: 0.8,
				area: '500px',
				content: html,
				yes: function(index, layero){
					if($('#logMessage').val() != ''){
						$.ajax({
							url: url,
							type: "post",
							data: {"logMessage":$('#logMessage').val()
								, "orderId":$("input[name='order.orderId']").val()
								, "orderLogStatus":"2"},
							dataType:"json",
							success: function(r){ 
								layer.close(index);
								location.reload();
							},
							error:function(a){
								console.log(a);
								layer.msg("保存失败，请联系管理员")
							}
						});
					}else{
						layer.msg("请输入日志内容");
					}
					
				},
				btn2: function(index, layero){
				  //return false 开启该代码可禁止点击该按钮关闭
				}
			})
		}
	});
	
	</script>
</body>
</html>
